<template>
  <div class="content" ref="MentContent">
    <el-menu :default-openeds="octopus.passport.menu" class="el-menu-vertical-demo" @open="opened" @close="closed" :collapse="menuIsFull">
      <el-submenu v-for="section in getList" :index="section.ID.toString()" :key="section.ID" >
        <template slot="title">
          <!--          <i class="el-icon-location"></i>-->
          <a v-bind:class="section.Icon"></a>
          <span slot="title">{{section[octopus.passport.language]}}</span>
        </template>
        <!--        <el-menu-item-group>-->
        <!--          <span slot="title">分组一</span>-->
        <!--          <el-menu-item index="1-1">选项1</el-menu-item>-->
        <!--          <el-menu-item index="1-2">选项2</el-menu-item>-->
        <!--        </el-menu-item-group>-->
        <template v-for="item in source.data.queryData">
          <el-submenu :index="section.ID+'-'+item.ID" :key="item.ID" v-if="item.ParentID === section.ID && item.IsShow === 1
          && isExistSubMenu(item.ID) && (','+octopus.passport.authorization.data+',').indexOf(','+item.ID+'_1,') > -1">
            <span slot="title">{{item[octopus.passport.language]}}</span>
            <el-menu-item v-for="subject in source.data.queryData" :index="section.ID+'-'+item.ID+''+subject.ID" :key="subject.ID"
                          v-if="subject.ParentID === item.ID && subject.IsShow === 1  && (','+octopus.passport.authorization.data+',').indexOf(','+subject.ID+'_1,') > -1"
                          v-on:click="set(subject)">
              {{subject[octopus.passport.language]}}
            </el-menu-item>
          </el-submenu>
          <el-menu-item :index="section.ID+'-'+item.ID" v-on:click="set(item)" :key="item.ID" v-if="item.ParentID === section.ID
          && item.IsShow === 1 && !isExistSubMenu(item.ID) && (','+octopus.passport.authorization.data+',').indexOf(','+item.ID+'_1,') > -1">
            <!--            <span class="el-icon-menu"></span>-->
            <span slot="title">{{item[octopus.passport.language]}}</span>
          </el-menu-item>
        </template>
      </el-submenu>
      <!--      <el-menu-item index="2">-->
      <!--        <template>-->
      <!--          <i class="el-icon-location"></i>-->
      <!--          <span slot="title">导航222</span>-->
      <!--        </template>-->
      <!--        <el-menu-item index="2-1">-->
      <!--          <template>-->
      <!--            <i class="el-icon-location"></i>-->
      <!--            <span slot="title">1231231</span>-->
      <!--          </template>-->
      <!--        </el-menu-item>-->
      <!--      </el-menu-item>-->
      <!--      <el-menu-item index="3" disabled>-->
      <!--        <i class="el-icon-document"></i>-->
      <!--        <span slot="title">导航三</span>-->
      <!--      </el-menu-item>-->
    </el-menu>

    <div v-if="false">
      <div v-for="section in source.data.queryData" class="section" v-if="section.ParentID === octopus.passport.system
    && (','+octopus.passport.authorization.data+',').indexOf(','+section.ID+'_1,') > -1">
        <div class="title" v-on:click="choice($event.target,section)">
          <span v-bind:class="section.Icon"></span> <!--onclick="$(this).parent().click()"-->
          <span class="text">{{section[octopus.passport.language]}}</span>
          <!--onclick="$(this).parent().click()"-->
        </div>
        <div class="item" v-for="item in source.data.queryData" v-if="item.ParentID === section.ID && item.IsShow === 1"
             v-on:click="set(item)" v-bind:style="{display:section.show?'block':'none'}">
          {{item[octopus.passport.language]}}
          <!--        {{offsetHeight}}-->
          <div class="subject" v-if="isExistSubMenu(item.ID)" v-bind:style="{marginTop:offsetHeight}">
            <div v-for="subject in source.data.queryData" v-if="subject.ParentID === item.ID && subject.IsShow === 1"
                 v-on:click="set(subject)">
              {{subject[octopus.passport.language]}}
            </div>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
  export default {
    name: 'com_menu', /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
    data() {
      return {
        octopus: this.$parent.octopus,
        source: {data: {queryData:[]}},
        menuIsFull: false, // 菜单是否。
      }
    },
    created: function () {
      this.octopus.tips.debug("Menu.vue执行了created事件。");
    },
    mounted: function () {
      this.$nextTick(function () {
        this.init();
      });
    },
    // 活动事件，写在这里的好处是不管是第一次创建还是后退回来，都会触发这个事件
    // 比较典型的就是列表组件，返回的时候往往是需要刷新的。
    activated: function () {
      this.load();// 首先执行初始化，获取所有系统全部菜单的缓存。
      this.octopus.tips.debug("Menu.vue执行了activated事件。");
    },
    updated: function () {
      this.octopus.tips.debug("Menu.vue执行了updated事件。");
    },
    computed: {
      // getSystemID: function () {
      //   this.system = 1;
      //   return system;
      // }
      getList(){
        let arr = [];
        arr = this.source.data.queryData.filter(section=> section.ParentID === this.octopus.passport.system && (','+this.octopus.passport.authorization.data+',').indexOf(','+section.ID+'_1,') > -1)
        return arr;
      },
      getChildList(){
        let arr = []
        arr = this.source.data.queryData.filter()
        return arr;
      }
    },
    methods: {
      // 初始化菜单八爪鱼数据源
      init: function () {
        let o = this;
        // // 监听滚动条事件。
        // $(this.$refs.MentContent).scroll(function (e) {
        //   o.resizeHeight(e);
        // });
        $(window).on("resize", function () {

          // 框架min-width为1000，所以统一如果小于1000，则自动最小化。
          if ($(window).width() < 1000) {
            o.menuIsFull = true;
            // alert($(".menu .content").html())
            $(".main .menu").width("65px");
            $(".menu .content").width("65px");
            $(".body .content .window").width($(".head .content").width() - 65);
          } else {
            o.menuIsFull = false;
            $(".main .menu").width("200px");
            $(".menu .content").width("200px");
            $(".body .content .window").width($(".head .content").width() - 200);
          }

          console.log($(window).width() + "|" + o.menuIsFull + "|" + $(".head .content").width());
        });
      },
      load: function () {
        let o = this;
        // 请求后台八爪鱼API框架。
        this.octopus.request.api.post("/Octopus/Engine/List", {
            id: 13,
            orderData: "Sort ASC",
            cellData: [
              {name: this.octopus.passport.language},
              {name: "ParentID",},
              {name: "Icon"},
              {name: "Url"},
              {name: "IsShow"},
            ],
            pageData: {
              index: 1,
              listSize: 11,
              rowSize: 7777//菜单不可能到777个的，因为7是我的幸运数字，所以7777，哈哈哈。
            }
          },
          // 处理回调事件，通过分析data.status.code的状态来实现。
          function (data) {
            if (data.status.code == 200) {
              $(data.content.queryData).each(function (index, item) {
                $(o.octopus.passport.menu).each(function (mIndex, mItem) {
                  if (mItem.ID == item.ID) {
                    // 此处从passprot中获取需要打开的菜单项目记忆。
                    item.show = true;
                    return false;// 跳出当前循环，记录为true。
                  }
                  item.show = false;
                });

                // 通过护照数据，判断当前用户是否具备当前菜单的权限


              });
              // 新增属性，需要使用$set，详细参考：https://blog.csdn.net/panyang01/article/details/76665448
              o.$set(o.source, "data", data.content);
            } else {
              o.octopus.tips.error(data);
            }
            // 调用大小监听，因为平台高度页面是由Menu组件撑开的。
            // o.resize();
          });
      },
      // 面板展开
      opened(key, keyPath) {
        // 控件
        if ($.grep(this.octopus.passport.menu, function (index) {
          return index == key;//筛选出当前数据列数据
        }).length == 0) {
          this.octopus.passport.menu.push(key);
          // alert(key);
          // this.menuOpen = key;
          // console.log(key, keyPath);
        }
      },
      // 面板收起来触发。
      closed(key, keyPath) {
        this.octopus.passport.menu = $.grep(this.octopus.passport.menu, function (index) {
          return index != key;//筛选出当前数据列数据
        });
      },
      set: function (menu) {
        // 如果
        if (!this.isExistSubMenu(menu.ID)) {
          // 循环tab，将当前焦点菜单定位false，因为新点击的菜单焦点是为true的。
          let isExists = false;
          let currentMenu;
          $(this.octopus.passport.tab).each(function (index, item) {
            if (item.id == menu.ID) {
              currentMenu = item;
              isExists = true;
            } else {
              item.current = false;
            }
          });

          // 如果不存在，则创建新tab。
          if (!isExists) {
            // 格式化m
            currentMenu = {
              id: menu.ID,
              url: menu.Url,
              name: menu[this.octopus.passport.language]
            }
            // 将选中的菜单追加到tab集合
            this.octopus.passport.tab.push(currentMenu);
          }

          // 设置当前选中Tab
          this.octopus.passport.tabCurrentName = "M_" + currentMenu.id;

          // 设置回调click事件
          if (this.click) {
            this.click(currentMenu);
          }
        }
      },
      isExistSubMenu: function (menuid) {
        let subData = $.grep(this.source.data.queryData, function (value) {
          // 如果当前菜单下存在菜单 并且 显示
          return (value.ParentID == menuid && value.IsShow == 1);
        });

        if (subData.length > 0) {
          return true;
        } else {
          return false;
        }
      },
      // 界面的高度撑开由Menu组件实现，故需求写在这里
      resizeHeight: function (e) {
        // // 计算被遮掉的高度 scrollLeft
        // // this.offsetHeight = $(window).height() - o.octopus.template.getTheme().offset.menu;
        // this.offsetHeight = $(".menu .content").scrollTop(); // 此方法可用。
        // // console.log($(".content").scrollTop())
        // // console.log($(".content").offset().top);
        // // console.log($(this.$refs.MentContent).scrollTop());
        // // console.log($(".menu .content").scrollTop());
      },
      // 刷新当前组件。
      refresh: function () {
        // Vue强制刷新
        this.$forceUpdate();
      },
    },
    watch: {
      system: function (val, old) {
        console.log("===" + val + ",old:" + old);
      }
    },
    props: ["click"]
  }
</script>
